<div class="home-page" ng-controller="homeCtrl">
<header>
    <div class="scan" ></div>
    <form>
        <input type="text" name="search-content" placeholder="海大珍珠" id="search" ng-focus="toSearch()">
        <button></button>
    </form>
    <div class="message"></div>
</header>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="javascript:;"><img src="src/img/banner1.png"></a></div>
        <div class="swiper-slide" style="display: none"><a href="javascript:;"><img src="src/img/banner2.png"></a></div>
        <div class="swiper-slide" style="display: none"><a href="javascript:;"><img src="src/img/banner3.png"></a></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<ul class="nav">
    <li>
        <img src="src/img/home_nav1.png" alt="nav1">
        <span>热卖推荐</span>
    </li>
    <li>
        <img src="src/img/home_nav2.png" alt="nav2">
        <span>爆款商品</span>
    </li>
    <li>
        <img src="src/img/home_nav3.png" alt="nav3">
        <span>最新商品</span>
    </li>
    <li>
        <img src="src/img/home_nav1.png" alt="nav1">
        <span>推荐商品</span>
    </li>
</ul>
<div class="headline">
    <b>珍 珠 头 条</b>
    <i href="javascript:;">珍珠都有哪些种类?</i>
    <img src="src/img/home_headline.png" alt="headline">
</div>
<div class="middle" id="middle">
    <div class="hot">
        <img src="src/img/home_hot_img.png" alt="hot-img">
        <h3>热卖推荐</h3>
        <a class="titleM" ui-sref="proDetails({ id:28 })">深层补水 畅饮水润<br>让你的肌肤“喝饱”水</a>
        <b class="title">水漾肌蜜三件套</b>
        <b class="price">￥<em>298</em></b>
        <a ui-sref="confirmOrder({ id:28 })" class="buy">立即购买</a>
    </div>
    <div class="boom">
        <h3>爆款商品</h3>
        <img src="src/img/home_boom_img.png" alt="boom-img">
        <a class="titleM" ui-sref="proDetails({ id:29 })">在最美的年龄<br>拒绝加“斑”</a>
        <b class="title">控油“神器”三件套</b>
        <b class="price">￥<em>98</em></b>
        <a ui-sref="confirmOrder({ id:29 })" class="buy">立即购买</a>
    </div>
    <div class="new">
        <h3>爆款商品</h3>
        <img src="src/img/home_new_img.png" alt="new-img">
        <a class="titleM" ui-sref="proDetails({ id:30 })">魅惑价值 尽享奢华<br>品味女士的最爱</a>
        <b class="title">来自深海的璀璨</b>
        <b class="price">￥<em>998</em></b>
        <a ui-sref="confirmOrder({ id:30 })" class="buy">立即购买</a>
    </div>
</div>
<div class="guess" id="guess">
    <h3>猜你喜欢</h3>
    <ul>
        <li>
            <a ui-sref="proDetails({ id:31 })" class="img"><img src="src/img/home_guess_img1.png" alt="guess1"></a>
            <b>奢华高贵</b>
            <a ui-sref="confirmOrder({ id:31 })" class="buy">立即购买</a>
        </li>
        <li>
            <a ui-sref="proDetails({ id:32 })" class="img"><img src="src/img/home_guess_img2.png" alt="guess2"></a>
            <b>精致奢华</b>
            <a ui-sref="confirmOrder({ id:32 })" class="buy">立即购买</a>
        </li>
    </ul>
</div>
<footer>
    <div class="option1" ui-sref="home">
        <i></i>
        <b>首页</b>
    </div>
    <div class="option2" ui-sref="proCategories">
        <i></i>
        <b>分类</b>
    </div>
    <div class="option3" ui-sref="shopCart">
        <i></i>
        <b>购物车</b>
    </div>
    <div class="option4" ui-sref="user">
        <i></i>
        <b>个人</b>
    </div>
</footer>
</div>
